<template>
  <div class="container">
    <div class="content">
      <div class="orders">
        <div v-for="(order, index) in orders" :key="order.orderId" class="order">
          <div class="part">
            <span v-if="role === 'customer'">{{ order.borrowerName }}</span>
            <span v-else>{{ order.userId }}</span>
            <span class="time">{{ order.transactionTime }}</span>
          </div>
          <div class="detail clearfix">
            <img :src="order.image" />
            <div class="name">{{ order.name }}</div>
            <div class="sumprice">{{ order.cost }}</div>
            <div class="num">×{{ order.quantity }}</div>
            <div class="sumprice">￥{{ order.costTotal }}</div>
            <div v-if="role === 'customer' || role === 'borrower'">
              <div class="option" v-if="order.isShipped === 'yes'">已发货</div>
              <div class="option" v-else>未发货</div>
            </div>
            <div v-else>
              <div class="option" v-if="order.isShipped === 'yes'">已发货</div>
              <el-button class="option" v-else plain round @click="delivery(order.orderId)"
                >发货</el-button
              >
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { getOrder, shipOrder } from '../api/goods'
import { reactive, ref, onMounted, computed } from 'vue'
import { ElNotification } from 'element-plus'
import useUserStore from '@/stores/modules/user'

const orders: any = reactive([])
const useStore = useUserStore()
const role = computed(() => useStore.role)
onMounted(() => {
  getData()
})

async function delivery(id: string) {
  const result: any = await shipOrder(id)
  console.log(result)
  getData()
}

const getData = async () => {
  const result: any = await getOrder()
  orders.splice(0, orders.length, ...result)
  console.log(orders)
}
</script>
<style lang="scss" scoped>
.clearfix::after {
  content: '';
  display: block;
  clear: both;
}
.container {
  background-color: rgba(255, 255, 255, 0.493);
  padding: 0 100px;
  font-family: Roboto;
  cursor: default;
  .content {
    padding: 10px 40px;
    min-height: 100vh;
    color: #423d3d;
    .orders {
      padding: 20px;
      border-radius: 10px;
      .order {
        box-shadow: 0px 0px 3px rgba(5, 5, 5, 0.422);
        background-color: #f4e6ea99;
        padding: 20px;
        border-radius: 6px;
        margin: 10px 0;
        .part {
          font-size: 18px;
          display: flex;
          .time {
            margin-left: auto;
          }
        }
        .detail {
          display: flex;
          border-radius: 10px;
          margin: 10px 0 0 0;
          background-color: #ffffff90;
          padding: 20px;
          font-size: 14px;
          font-family: Roboto;
          align-items: center;

          img {
            margin: 0 20px;
            width: 80px;
            height: 80px;
            border-radius: 6px;
          }
          .name {
            margin: 0 20px;
            width: 80px;
            line-height: 22px;
          }
          .sumprice {
            margin: 0 20px;
            width: 50px;
            color: #035dca;
          }
          .num {
            width: 30px;
          }
          .option {
            margin: 0 0 0 50px;
            width: 100px;
          }
        }
      }
    }
  }
}
</style>
